<template>
  <Card>
    <Steps :current="current">
      <Step title="选择数量"></Step>
      <Step title="确认订单"></Step>
      <Step title="支付"></Step>
      <Step title="完成"></Step>
    </Steps>
    <div class="stepContainer" v-if="current === 0">
      <Form :label-width="100">
        <FormItem label="商品名称：">
          <span>{{good.name}}</span>
        </FormItem>
        <FormItem label="商品数量：">
          <InputNumber v-model="step.number" :min="1" :max="99"/>
        </FormItem >
        <FormItem label="总金额：">
          <span>{{calcMoney}}</span>
        </FormItem>
      </Form>
    </div>
    <div class="stepContainer" v-if="current === 1">
      <Form :label-width="100">
        <FormItem label="商品编号：">
          <span>{{good.id}}</span>
        </FormItem>
        <FormItem label="商品名称：">
          <span>{{good.name}}</span>
        </FormItem>
        <FormItem label="商品版本：">
          <span>{{good.version}}</span>
        </FormItem>
        <FormItem label="商品描述：">
          <span>{{good.description}}</span>
        </FormItem>
        <FormItem label="商品备注：">
          <span>{{good.note}}</span>
        </FormItem>
        <FormItem label="商品数量：">
          <span>{{step.number}}</span>
        </FormItem>
        <FormItem label="总金额：">
          <span>{{step.money}}</span>
        </FormItem>
      </Form>
    </div>
    <div class="stepContainer" v-if="current === 2" style="text-align: center">
      <img :src="qrCode" style="width: 180px; height: 180px;"/>
      <h3 style="color: black">请扫码完成支付</h3>
    </div>
    <div class="stepContainer" v-if="current === 3">
      恭喜！您已成功下单，点击完成跳转到订单列表
    </div>
    <div style="overflow:hidden;">
      <Button type="primary" @click="next" :loading="nextLoading" style="float: right">{{buttonName}}</Button>
    </div>
  </Card>
</template>

<script>
  export default {
    name: "buy",
    data() {
      return {
        current: 0,
        buttonName: "下一步",
        good: {
          id: null,
          name: "",
          price: null,
          version: "",
          description: "",
          note: "",
        },
        step: {
          number: 1,
          money: 0.00
        },
        // 订单id
        orderId: null,
        // 下一步按钮加载
        nextLoading: false,
        // 支付二维码
        qrCode: "",
      }
    },
    computed: {
      calcMoney() {
        let money = (this.good.price * this.step.number).toFixed(2);
        this.step.money = money;
        return money;
      }
    },
    methods: {
      getGood() {
        this.$requests.get("/good/getGood", {goodId: this.good.id}).then(res => {
          if (res.data.code === 0) {
            this.good = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      // 下单
      placeOrder(callback) {
        this.nextLoading = true;
        this.$requests.post("/order/placeOrder", {
          goodId: this.good.id,
          number: this.step.number,
          money: this.step.money
        }).then(res => {
          if (res.data.code === 0) {
            this.$Message.success("下单成功");
            this.orderId = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
          setTimeout(() => {
            this.nextLoading = false;
            if (callback) {
              callback();
            }
          }, 500);
        })
      },
      // 下一步按钮方法
      next() {
        if (this.current === 0) {
          this.buttonName = "下单";
          this.current += 1;
        }else if (this.current === 1) {
          this.placeOrder(() => {
            this.buttonName = "下一步";
            this.current += 1;
            // 合成支付链接
            const payUrl = location.protocol + "//" + location.host + "/#/pay?orderId=" + this.orderId + "&token=" + sessionStorage.getItem("token");
            // 获取二维码
            this.qrCode = baseUrl + "/qrCode?r=" + new Date().getTime() + "&string=" + encodeURIComponent(payUrl);
          });
        } else if (this.current === 2) {
          this.$Modal.confirm({
            title: "订单支付确认",
            content: "您是否已经根据提示支付订单？",
            okText: "我已完成支付",
            onOk: () => {
              this.$requests.post("/order/check", {orderId: this.orderId}).then(res => {
                if (res.data.code === 0) {
                  this.buttonName = "完成";
                  this.current += 1;
                } else {
                  this.$Message.error("您未支付");
                }
              })
            },
            cancelText: "我未支付"
          });
        } else if (this.current === 3) {
          this.$router.push("/order/list");
        } else {
          this.current += 1;
        }
      }
    },
    created() {
      this.good.id = this.$route.query.goodId;
      this.orderId = this.$route.query.orderId;
      if (this.good.id) {
        this.getGood();
      } else {
        this.current = 2;
        this.buttonName = "下一步";
        // 合成支付链接
        const payUrl = location.protocol + "//" + location.host + "/#/pay?orderId=" + this.orderId + "&token=" + sessionStorage.getItem("token");
        // 获取二维码
        this.qrCode = baseUrl + "/qrCode?r=" + new Date().getTime() + "&string=" + encodeURIComponent(payUrl);
      }
    }
  }
</script>

<style scoped>
  .stepContainer {
    padding: 40px 20px 20px 20px;
    min-height: 400px;
  }
</style>
